<template>
  <div class="pie" id="bar1"></div>
</template>

<script>
import * as echarts from 'echarts';
import json from './theme';
export default {
  name: 'Bar',
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          {
            name: '测试'
          },
          {
            name: '测试2'
          }
        ];
      }
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val.length) {
          this.init();
        }
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('bar1');
        echarts.registerTheme('dark', json);
        const myChart = echarts.init(chartDom, 'dark');

        const option = {
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: this.data.filter(e => e.address).map(e => e.address),
            axisLabel: {
              interval: 0
            }
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          grid: {
            top: '5%',
            bottom: '28%'
          },
          series: [
            {
              data: this.data.filter(e => e.address).map(e => Number(e.sum)),
              type: 'bar',
              barWidth: 20,

              itemStyle: {
                // borderRadius: [10, 10, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: '#2AE8EE' // 0% 处的颜色
                    },
                    {
                      offset: 0.7, color: 'rgba(42, 232, 238, 0.7)' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(42, 232, 238, 0.1)' // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
      });
    }
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
  }
</style>
